<!doctype html>
<head>
<meta charset="utf-8">
<title>Gappro - Admin Theme Template for Backend Applications.</title>
<link href='http://fonts.googleapis.com/css?family=Sintony' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" media="screen">
<link href="css/style-responsive.css" rel="stylesheet" media="screen">
<link href="css/font_awesome/font-awesome.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap_switch/bootstrapSwitch.css" rel="stylesheet" media="screen">
<link href="css/sb/sexybuttons.css" rel="stylesheet" media="screen">
<link href="css/joyride/joyride-2.0.3.css" rel="stylesheet" media="screen">
<link href="css/prettify/sons-of-obsidian.css" rel="stylesheet" media="screen">
<style>
  .sexybutton,#default-icons a.btn,#awesome-icons a.btn {margin-bottom: 8px;}
  #default-icons a.btn {width: 1em;height: 1em;}
  #awesome-icons a.btn {width: 200px; text-align: left;}
</style>
<meta name="description" content="admin theme template for any backend applications.">
<meta name="author" content="boostbob.github.com">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>

<body>
<div class="navbar navbar-inverse">
  <div class="navbar-inner">
    <div class="container-fluid">
      <div class="row-fluid">

        <div class="span8">
          <a href="index.html">
            <img class="brand" src="img/logo.png" alt="">
          </a>
          
          <form class="form-search">
            <input type="text" placeholder="keywords" class="input-medium search-query">
            <button type="submit" class="btn">Search</button>

              <div class="btn-group">
                <a class="btn dropdown-toggle btn-warning" data-toggle="dropdown" href="#">
                  <span><i class="icon-bell"></i></span>
                </a>
                <ul class="dropdown-menu" id="messages-box">
                  <li>
                    <img src="img/avatar2.jpg" alt="">
                    <span class="time">6 mintues ago</span><br>
                    <span class="content">Lorem ipsum et consectetur officia veniam... </span>
                  </li>
                  <li>
                    <img src="img/avatar4.jpg" alt="">
                     <span class="time">12 mintues ago</span><br>
                    <span class="content">Lorem ipsum et consectetur officia veniam... </span>
                  </li>
                  <li>
                    <img src="img/avatar6.jpg" alt="">
                  <span class="time">20 mintues ago</span><br>
                    <span class="content">Lorem ipsum et consectetur officia veniam... </span>
                  </li>
                  <li>
                    <img src="img/avatar8.jpg" alt="">
                    <span class="time">25 mintues ago</span><br>
                    <span class="content">Lorem ipsum et consectetur officia veniam... </span>
                  </li>
                </ul>
            </div>
          </form>
        </div>

        <div class="span4">
          <ul id="top-menu">
            <li>
              <a href="javascript:void(0)" class="btn"> 
                <i class="icon-edit"></i>
                <span>Notes</span>
              </a>
            </li>
            
            <li>
              <a href="javascript:void(0)" class="btn">
                <i class="icon-group"></i>
                <span>Groups</span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0)" class="btn">
                <i class="icon-eye-open"></i>
                <span>Website</span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0)" class="btn">
                <i class="icon-off"></i>
                <span>Logout</span>
              </a>
            </li>
          </ul>
        </div>  

      </div>

      <div id="config-box">
        <a href="javascript:void(0)" class="btn config-button"><i class="icon-cog"></i></a>
        <div class="btn-group">
                  <button class="btn"><i class="icon-refresh"></i> Menu Themes</button>
                  <button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle">
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" id="menu_colors">
                    <li><a href="#" data-color="pink">PINK</a></li>
                    <li><a href="#" data-color="green">GREEN</a></li>
                    <li><a href="#" data-color="grey">GREY</a></li>
                    <li><a href="#" data-color="white">WHITE</a></li>
                    <li><a href="#" data-color="orange">ORANGE</a></li>
                    <li><a href="#" data-color="blue">BLUE</a></li>
                    <li><a href="#" data-color="gold">GOLD</a></li>
                    <li><a href="#" data-color="black">DEFAULT</a></li>
                  </ul>
              </div>
              <h4>Backgournd:</h4>
              <ul id="backgrounds">
                <li><a href="javascript:void(0)"><img src="img/backgrounds/1.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/2.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/3.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/4.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/5.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/6.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/7.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/8.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/9.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/10.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/11.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/12.jpg" alt=""></a></li>
              </ul>
              <h4>Menu Sub Trigger:</h4>
            <ul id="menu-trigger">
              <li><a href="javascript:void(0)" class="btn" data-trigger="click">Click</a></li>
              <li><a href="javascript:void(0)" class="btn" data-trigger="mouseover">Hover</a></li>
            </ul>
              <h4>Menu Background:</h4>
              <ul id="menu-backgrounds">
                <li><a href="javascript:void(0)"><img src="img/backgrounds/menu1.png" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/menu2.png" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/menu3.png" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/menu4.png" alt=""></a></li>
              </ul>
      </div>

    </div>
  </div>
</div>

<div class="container-fluid" id="main_wrapper">
  <div class="row-fluid">
    <div class="span2" id="sidebar">
      <div id="icon-menu">
        <ul>
          <li class="circle">
            <a href="profile.html" title="Profile">
              <img src="img/avatar9.jpg" alt="">   
            </a>
          </li>
          <li class="filter-box">
            <input type="text" id="menuitem-filter" placeholder="e.g. widget">
          </li>
          <li class="menu-controller">
            <a id="btn-menu-controller" href="javascript:void(0)">
              <span><i class="icon-angle-up"></i></span>
            </a>
          </li>
          <li data-keywords="home,dashboard,index,default,entry">
            <a href="index.html" title="Dashboard">
              <i class="icon-home"></i> <span>Home</span>
            </a>
          </li>
          <li data-keywords="widget,window,block,ui">
            <a href="widget.html" title="Widget" id="widget-menu">
              <i class="icon-th-large"></i> <span>Widget</span>
            </a>
          </li>
          <li data-keywords="table,data,rowlink,list,ui">
            <a href="tables.html" title="Tables">
              <i class="icon-th-list"></i> <span>Tables</span>
            </a>
          </li>
          <li data-keywords="chart,pie,bar,line,speakline,dynamic,donut,stacked">
            <a href="charts.html" title="Charts">
              <i class="icon-bar-chart"></i> <span>Charts</span>
            </a>
          </li>
          <li data-keywords="forms,editor,wizard,validate,editable,slider,ui">
            <a href="forms.html" title="Forms">
              <i class="icon-credit-card"></i> <span>Forms</span>
              <span class="label label-success">5</span>
            </a>
            <ul class="sub-menus">
              <li><a href="forms.html" title="Forms"> <span>Elements</span> </a> </li>
              <li><a href="editor.html" title="Editor"> <span>Editor</span> </a> </li>
              <li><a href="wizard.html" title="Wizard"> <span>Wizard</span> </a> </li>
              <li><a href="validator.html" title="Validator"> <span>Validator</span> </a> </li>
              <li><a href="editable.html" title="Editable"> <span>Editable</span> </a> </li>
              <li><a href="javascript:void(0)" title="Sub Link">Sub Link</a></li>
            </ul>
          </li>
          <li class="current" data-keywords="ui,table,interface,gallery,box,block,widget,timeline,grid">
            <a href="ui.html" title="UI">
              <i class="icon-camera"></i> <span>Interfaces</span>
              <span class="label label-success">12</span>
            </a>
            <ul class="sub-menus">
              <li><a href="ui.html" title="UI"> <span>Elements</span> </a> </li>
              <li><a href="attr.html" title="Attr Box"> <span>Attr Box</span> </a></li>
              <li><a href="cal.html" title="Calendar">Calendar</a></li>
              <li><a href="buttons.html" title="Buttons"> <span>Buttons</span> </a> </li>
              <li><a href="grid.html" title="Grid"> <span>Grid</span> </a> </li>
              <li><a href="timeline.html" title="jQuery Timeline"><span>Timeline</span></a></li>
              <li><a href="tabs.html" title="Tab">Tabs</a></li>
              <li><a id="btn-tour" href="javascript:void(0)" title="Tour Guide">Guide Tour</a></li>
              <li><a href="sliders.html" title="Sliders">Sliders</a></li>
              <li><a href="noty.html" title="Notifications">Notifications</a></li>
              <li><a href="accordion.html" title="Accordion">Accordion</a></li>
              <li><a href="faq.html" title="FAQ">FAQ</a></li>
            </ul> 
          </li>
          <li data-keywords="wizard,typo,text,font">
            <a href="typography.html" title="Typography">
              <i class="icon-font"></i> <span>Typography</span>
            </a>
          </li>         
          <li data-keywords="gallery,login,profile,403,404,error,starter">
            <a href="javascript:void(0)" title="Extra">
              <i class="icon-legal"></i> <span>Extra</span>
              <span class="label label-success">6</span>
            </a>
            <ul class="sub-menus">
              <li><a href="gallery.html" title="Gallery"><i class="icon-picture"></i> Gallery</a></li>  
              <li><a href="login.html" title="login"><i class="icon-user"></i> Login</a></li> 
              <li><a href="profile.html" title="profile"><i class="icon-cog"></i> Profile</a></li>  
              <li><a href="404.html" title="404"><i class="icon-eye-close"></i> 404</a></li>  
              <li><a href="tickets.html" title="Tickets"><i class="icon-list"></i> Tickets</a></li>
              <li><a href="starter.html" title="Starter"><i class="icon-question-sign"></i> Starter</a></li>
            </ul>
          </li>
          <li data-keywords="faq,questions">
            <a href="faq.html">
              <i class="icon-question-sign"></i>
              <span>FAQ</span>
            </a>
          </li>
          <li data-keywords="profile,settings,custom,modal,personal">
            <a href="#settings" role="button" data-toggle="modal" data-target="#settings">
              <i class="icon-cog"></i> <span>Settings</span>
            </a>
            <div id="settings" class="modal hide fade" tabindex="-1" role="dialog"> 
              <div class="modal-header"> 
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
                <h3 id="myModalLabel">Config Box
                </h3> 
              </div> 
              <div class="modal-body"> 
                <form class="form-horizontal" id="basic-form" method="get">

                    <div class="control-group">
                      <label class="control-label">Firstname (required)</label>
                      <div class="controls">
                        <input type="text" name="firstname" id="firstname" placeholder="lisa" required>
                      </div>
                    </div>

                    <div class="control-group">
                      <label class="control-label">lastname (required)</label>
                      <div class="controls">
                        <input type="text" name="lastname" id="lastname" placeholder="joe" required>
                      </div>
                    </div>

                    <div class="control-group">
                      <label class="control-label">email (required)</label>
                      <div class="controls">
                        <input name="email" id="email" type="email" placeholder="lisa@abc.com" required>
                      </div>
                    </div>

                    <div class="control-group">
                      <label class="control-label">Comment (requied)</label>
                      <div class="controls">
                        <textarea name="comment" id="comment" placeholder="balbal blala..." required></textarea>  
                      </div>
                    </div>

                    <div class="form-actions">
                      <button type="submit" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Save changes</button>
                      <button type="button" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
                    </div>

                  </form>           
              </div> 
            </div>
          </li>
          <li data-keywords="login,signin,profile,entry">
            <a href="login.html">
              <i class="icon-user"></i>
              <span>Login</span>
            </a>
          </li>
        </ul>
      </div>

      <hr>

      <div id="workspace">
        <a id="btn-restore-all" href="javascript:void(0)" class="btn btn-success"><i class="icon-plus"></i> Restore All</a>
      </div>
    </div>

    <div class="span10" id="main">
      <!--main section-->

      <div class="row-fluid">
        <div class="breadcrumbs-title">
          Buttons.
          <div class="pull-right">
            <img src="img/icons/bestseller.png" alt="">
            <span>Balance: $927</span>
          </div>
          <div class="sub">
            Lorem ipsum Esse adipisicing sed fugiat deserunt exercitation ut est aute aliqua amet reprehenderit voluptate irure consequat tempor cupidatat tempor mollit.
          </div>
        </div>
        <ul id="breadcrumbs">
          <li>
            <a href="index.html">
              <span>Home <i class="icon-angle-right"></i></span>
            </a>
          </li>
          <li>
            <a href="index.html">
              <span>Path Here <i class="icon-angle-right"></i></span>
            </a>
          </li>
          <li>
            <a href="index.html">
              <span>Dashboard <i class="icon-map-marker"></i></span>
            </a>
          </li>
        </ul>
      </div>

      <div class="row-fluid">
          <div class="widget">
            <div class="widget-header">
              <i class="icon-th-list"></i>
              <h3>Default Button with Icons</h3>
              <a data-widget-action="thumb"></a>
              <a data-widget-action="full"></a>
              <a data-widget-action="code"></a>
              <a data-widget-action="hide"></a>
              <a data-widget-action="close"></a>
            </div>
            <!-- /widget-header -->

            <div class="widget-content">

              <div class="row-fluid">
                <a href="#" class="btn">
                  <i class="icon-pencil"></i> <strong>Write</strong>
                </a>
                <a href="#" class="btn">
                  <i class="icon-edit"></i> <strong>Edit</strong>
                </a>
                <a href="#" class="btn">
                  <i class="icon-trash"></i>
                  <strong>Delete</strong>
                </a>
                <a href="#" class="btn">
                  <i class="icon-align-justify"></i>
                  <strong>List</strong>
                </a>

                <a href="#" class="btn btn-primary">
                  <i class="icon-pencil icon-white"></i>
                  <span>
                    <strong>Write</strong>
                  </span>
                </a>

                <a href="#" class="btn btn-primary">
                  <i class="icon-eye-open icon-white"></i>
                  <span>
                    <strong>View</strong>
                  </span>
                </a>

                <a href="#" class="btn btn-primary">
                  <i class="icon-edit icon-white"></i>
                  <span>
                    <strong>Edit</strong>
                  </span>
                </a>
                <a href="#" class="btn btn-primary">
                  <i class="icon-trash icon-white"></i>
                  <span>
                    <strong>Delete</strong>
                  </span>
                </a>
              </div>
            </div>
            <!-- /widget-content --> </div>
      </div>

      <div class="row-fluid">
        <div class="widget">
          <div class="widget-header">
          <i class="icon-th-list"></i>
          <h3>Button Styles</h3>
          <a data-widget-action="thumb"></a>
          <a data-widget-action="full"></a>
          <a data-widget-action="code"></a>
          <a data-widget-action="hide"></a>
          <a data-widget-action="close"></a>
          </div>
          <div class="widget-content">
            <a href="javascript:" class="btn btn-default">Button Default</a>
            <a href="javascript:" class="btn btn-primary">Button Primary</a>
            <a href="javascript:" class="btn btn-info">Button Info</a>
            <a href="javascript:" class="btn btn-warning">Button Warning</a>
            <a href="javascript:" class="btn btn-success">Button Success</a>
            <a href="javascript:" class="btn btn-danger">Button Danger</a>
            <a href="javascript:" class="btn btn-inverse">Button Inverse</a>
          </div>
        </div>
      </div>

      <div class="row-fluid">
        <div class="widget">
          <div class="widget-header">
            <i class="icon-th-list"></i>
            <h3>Button Shapes</h3>
            <a data-widget-action="thumb"></a>
            <a data-widget-action="full"></a>
            <a data-widget-action="code"></a>
            <a data-widget-action="hide"></a>
            <a data-widget-action="close"></a>
          </div>
          <div class="widget-content">
            <h4>Default</h4>
            <a href="javascript:void(0)" class="btn">Button Default</a>
            <a href="javascript:void(0)" class="btn btn-primary">Button Primary</a>
            <a href="javascript:void(0)" class="btn btn-info">Button Default</a>
            <a href="javascript:void(0)" class="btn btn-warning">Button Default</a>
            <a href="javascript:void(0)" class="btn btn-success">Button Default</a>
            <a href="javascript:void(0)" class="btn btn-danger">Button Default</a>
            <a href="javascript:void(0)" class="btn btn-inverse">Button Default</a>
            <a href="javascript:void(0)" class="btn btn-inverse"><i class="icon-home"></i></a>

            <h4>Cicrle</h4>
            <a href="javascript:void(0)" class="btn btn-circle">Button Circle</a>
            <a href="javascript:void(0)" class="btn btn-primary btn-circle">Button Circle</a>
            <a href="javascript:void(0)" class="btn btn-info btn-circle">Button Circle</a>
            <a href="javascript:void(0)" class="btn btn-warning btn-circle">Button Circle</a>
            <a href="javascript:void(0)" class="btn btn-success btn-circle">Button Circle</a>
            <a href="javascript:void(0)" class="btn btn-danger btn-circle">Button Circle</a>
            <a href="javascript:void(0)" class="btn btn-inverse btn-circle">Button Circle</a>
            <a href="javascript:void(0)" class="btn btn-inverse btn-circle"><i class="icon-home"></i></a>

            <h4>Half-Circle</h4>
            <a href="javascript:void(0)" class="btn btn-half-circle">Button Circle</a>
            <a href="javascript:void(0)" class="btn btn-primary btn-half-circle">Button Circle</a>
            <a href="javascript:void(0)" class="btn btn-info btn-half-circle">Button Circle</a>
            <a href="javascript:void(0)" class="btn btn-warning btn-half-circle">Button Circle</a>
            <a href="javascript:void(0)" class="btn btn-success btn-half-circle">Button Circle</a>
            <a href="javascript:void(0)" class="btn btn-danger btn-half-circle">Button Circle</a>
            <a href="javascript:void(0)" class="btn btn-inverse btn-half-circle">Button Circle</a>
            <a href="javascript:void(0)" class="btn btn-inverse btn-half-circle"><i class="icon-home"></i></a>

            <h4>Half-Circle-Reverse</h4>
            <a href="javascript:void(0)" class="btn btn-half-circle-reverse">Button Circle</a>
            <a href="javascript:void(0)" class="btn btn-primary btn-half-circle-reverse">Button Circle</a>
            <a href="javascript:void(0)" class="btn btn-info btn-half-circle-reverse">Button Circle</a>
            <a href="javascript:void(0)" class="btn btn-warning btn-half-circle-reverse">Button Circle</a>
            <a href="javascript:void(0)" class="btn btn-success btn-half-circle-reverse">Button Circle</a>
            <a href="javascript:void(0)" class="btn btn-danger btn-half-circle-reverse">Button Circle</a>
            <a href="javascript:void(0)" class="btn btn-inverse btn-half-circle-reverse">Button Circle</a>
            <a href="javascript:void(0)" class="btn btn-inverse btn-half-circle-reverse"><i class="icon-home"></i></a>

            <h4>Roundness</h4>
            <a href="javascript:void(0)" class="btn btn-roundness">Roundness</a>
            <a href="javascript:void(0)" class="btn btn-primary btn-roundness">Roundness</a>
            <a href="javascript:void(0)" class="btn btn-info btn-roundness">Roundness</a>
            <a href="javascript:void(0)" class="btn btn-warning btn-roundness">Roundness</a>
            <a href="javascript:void(0)" class="btn btn-success btn-roundness">Roundness</a>
            <a href="javascript:void(0)" class="btn btn-danger btn-roundness">Roundness</a>
            <a href="javascript:void(0)" class="btn btn-inverse btn-roundness">Roundness</a>
            <a href="javascript:void(0)" class="btn btn-inverse btn-roundness"><i class="icon-home"></i></a>
          </div>
        </div>
      </div>

      <div class="row-fluid">
        <div class="widget">
          <div class="widget-header">
            <i class="icon-th-list"></i>
            <h3>Button Size</h3>
            <a data-widget-action="thumb"></a>
            <a data-widget-action="full"></a>
            <a data-widget-action="code"></a>
            <a data-widget-action="hide"></a>
            <a data-widget-action="close"></a>
          </div>
          <!-- /widget-header -->

          <div class="widget-content">

              <h4>Mini</h4>
              <button class="btn btn-mini" type="button">Mini size</button>
              <button class="btn btn-mini btn-primary" type="button">Mini size</button>
              <button class="btn btn-mini btn-info" type="button">Mini size</button>
              <button class="btn btn-mini btn-warning" type="button">Mini size</button>
              <button class="btn btn-mini btn-success" type="button">Mini size</button>
              <button class="btn btn-mini btn-danger" type="button">Mini size</button>
              <button class="btn btn-mini btn-inverse" type="button">Mini size</button>
              <button class="btn btn-small" type="button">Small button</button>
              <button class="btn btn-small" type="button"><i class="icon-home"></i></button>

              <h4>Default</h4>
              <button class="btn">Default size</button>
              <button class="btn btn-primary">Default size</button>
              <button class="btn btn-info">Default size</button>
              <button class="btn btn-warning">Default size</button>
              <button class="btn btn-success">Default size</button>
              <button class="btn btn-danger">Default size</button>
              <button class="btn btn-inverse">Default size</button>
              <button class="btn" type="button"><i class="icon-home"></i></button>

              <h4>Large</h4>
              <button class="btn btn-large" type="button">Large size</button>
              <button class="btn btn-large btn-info" type="button">Large size</button>
              <button class="btn btn-large btn-warning" type="button">Large size</button>
              <button class="btn btn-large btn-success" type="button">Large size</button>
              <button class="btn btn-large btn-danger" type="button">Large size</button>
              <button class="btn btn-large btn-inverse" type="button">Large size</button>
              <button class="btn btn-large" type="button"><i class="icon-home"></i></button>

              <h4>XLarge</h4>
              <button class="btn btn-xlarge" type="button">XLarge size</button>
              <button class="btn btn-xlarge btn-info" type="button">XLarge size</button>
              <button class="btn btn-xlarge btn-warning" type="button">XLarge size</button>
              <button class="btn btn-xlarge btn-success" type="button">XLarge size</button>
              <button class="btn btn-xlarge btn-danger" type="button">XLarge size</button>
              <button class="btn btn-xlarge btn-inverse" type="button">XLarge size</button>              
              <button class="btn btn-xlarge btn-inverse" type="button"><i class="icon-home"></i></button>              

          </div>
          <!-- /widget-content --> 
        </div>
      </div>

      <div class="row-fluid">
        <div class="widget">
            <div class="widget-header">
              <i class="icon-th-list"></i>
              <h3>Toggle Button</h3>
              <a data-widget-action="thumb"></a>
              <a data-widget-action="full"></a>
              <a data-widget-action="code"></a>
              <a data-widget-action="hide"></a>
              <a data-widget-action="close"></a>
            </div>
            <!-- /widget-header -->

            <div class="widget-content">

              <h4>Size</h4> 
              <div>
                <div class="switch switch-mini"><input type="checkbox"></div>
                <div class="switch switch-small"><input type="checkbox"></div>
                <div class="switch"><input type="checkbox"></div>
                <div class="switch switch-large"><input type="checkbox"></div>
              </div>

              <h4>Color</h4> 
              <div>
                <div class="switch" data-on="primary" data-off="primary"> <input type="checkbox"></div>
                <div class="switch" data-on="success" data-off="info"> <input type="checkbox"></div>
                <div class="switch" data-on="danger" data-off="success"> <input type="checkbox"></div>
                <div class="switch" data-on="primary" data-off="danger"> <input type="checkbox"></div>
                <div class="switch" data-on="danger" data-off="warning"> <input type="checkbox"></div>
              </div>
  
              <h4>Custom &amp; Callack</h4>
              <div class="switch" data-on-label="Hi, Gappro" data-off-label="Toggle Me" id="customSwitch"> <input type="checkbox"></div>
              <div class="switch" data-on-label="<i class='icon-ok icon-white'></i> " data-off-label="<i class='icon-remove'></i> "> <input type="checkbox"></div>
          </div>
          <!-- /widget-content --> 
        </div>
      </div>

      <div class="row-fluid">
        <div class="widget">
          <div class="widget-header">
            <i class="icon-th-list"></i>
            <h3>Default Icons</h3>
            <a data-widget-action="thumb"></a>
            <a data-widget-action="full"></a>
            <a data-widget-action="code"></a>
            <a data-widget-action="hide"></a>
            <a data-widget-action="close"></a>
          </div>
          <!-- /widget-header -->

          <div class="widget-content" id="default-icons">
              <a class="btn" href="javascript:void(0)"><i class="icon-glass"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-music"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-search"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-envelope"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-heart"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-star"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-star-empty"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-user"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-film"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-th-large"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-th"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-th-list"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-ok"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-remove"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-zoom-in"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-zoom-out"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-off"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-signal"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-cog"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-trash"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-home"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-file"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-time"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-road"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-download-alt"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-download"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-upload"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-inbox"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-play-circle"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-repeat"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-refresh"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-list-alt"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-lock"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-flag"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-headphones"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-volume-off"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-volume-down"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-volume-up"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-qrcode"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-barcode"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-book"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-bookmark"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-print"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-camera"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-font"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-bold"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-italic"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-text-height"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-text-width"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-align-left"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-align-center"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-align-right"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-align-justify"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-list"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-indent-left"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-indent-right"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-facetime-video"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-picture"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-pencil"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-map-marker"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-adjust"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-tint"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-edit"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-share"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-check"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-move"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-step-backward"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-fast-backward"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-backward"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-play"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-pause"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-stop"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-forward"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-fast-forward"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-step-forward"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-eject"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-chevron-left"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-chevron-right"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-plus-sign"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-minus-sign"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-remove-sign"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-ok-sign"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-question-sign"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-info-sign"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-screenshot"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-remove-circle"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-ok-circle"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-ban-circle"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-arrow-left"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-arrow-right"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-arrow-up"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-arrow-down"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-share-alt"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-resize-full"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-resize-small"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-plus"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-minus"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-asterisk"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-exclamation-sign"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-gift"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-leaf"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-fire"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-eye-open"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-eye-close"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-warning-sign"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-plane"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-calendar"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-random"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-comment"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-magnet"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-chevron-up"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-chevron-down"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-retweet"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-shopping-cart"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-folder-close"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-folder-open"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-resize-vertical"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-resize-horizontal"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-hdd"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-bullhorn"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-bell"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-certificate"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-thumbs-up"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-thumbs-down"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-hand-right"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-hand-left"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-hand-up"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-hand-down"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-circle-arrow-right"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-circle-arrow-left"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-circle-arrow-up"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-circle-arrow-down"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-globe"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-wrench"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-tasks"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-filter"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-briefcase"></i></a>
              <a class="btn" href="javascript:void(0)"><i class="icon-fullscreen"></i></a>
          </div>
          <!-- /widget-content --> </div>
      </div>

      <div class="row-fluid">
        <div class="widget">
          <div class="widget-header">
            <i class="icon-th-list"></i>
            <h3>Font Awesome 3.0</h3>
            <a data-widget-action="thumb"></a>
            <a data-widget-action="full"></a>
            <a data-widget-action="code"></a>
            <a data-widget-action="hide"></a>
            <a data-widget-action="close"></a>
          </div>
          <!-- /widget-header -->

          <div class="widget-content" id="awesome-icons">
              <h4>New Icons</h4>
              <a class="btn" href="javascript:void(0)"><i class="icon-cloud-download"></i> icon-cloud-download</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-cloud-upload"></i> icon-cloud-upload</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-lightbulb"></i> icon-lightbulb</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-exchange"></i> icon-exchange</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-bell-alt"></i> icon-bell-alt</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-file-alt"></i> icon-file-alt</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-beer"></i> icon-beer</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-coffee"></i> icon-coffee</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-food"></i> icon-food</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-fighter-jet"></i> icon-figher-jet</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-user-md"></i> icon-user-md</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-stethoscope"></i> icon-stethoscope</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-suitcase"></i> icon-suitcase</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-building"></i> icon-building</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-hospital"></i> icon-hospital</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-ambulance"></i> icon-ambulance</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-medkit"></i> icon-medkit</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-h-sign"></i> icon-h-sign</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-plus-sign-alt"></i> icon-plus-sign-alt</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-spinner"></i> icon-spinner</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-angle-left"></i> icon-angle-left</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-angle-right"></i> icon-angle-right</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-angle-up"></i> icon-angle-up</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-angle-down"></i> icon-angle-down</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-double-angle-left"></i> icon-double-angle-left</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-double-angle-right"></i> icon-double-angle-right</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-double-angle-up"></i> icon-double-angle-up</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-double-angle-down"></i> icon-double-angle-down</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-circle-blank"></i> icon-circle-blank</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-circle"></i> icon-circle</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-desktop"></i> icon-desktop</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-laptop"></i> icon-laptop</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-tablet"></i> icon-tablet</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-mobile-phone"></i> icon-mobile-phone</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-quote-left"></i> icon-quote-left</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-quote-right"></i> icon-quote-right</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-reply"></i> icon-reply</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-github-alt"></i> icon-github-alt</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-folder-close-alt"></i> icon-folder-close-alt</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-folder-open-alt"></i> icon-folder-open-alt</a>

              <h4>Web Application Icons</h4>
              <a class="btn btn-primary" href="javascript:void(0)"><i class="icon-adjust"></i> icon-adjust</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-asterisk"></i> icon-asterisk</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-ban-circle"></i> icon-ban-circle</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-bar-chart"></i> icon-bar-chart</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-barcode"></i> icon-barcode</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-beaker"></i> icon-beaker</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-beer"></i> icon-beer</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-bell"></i> icon-bell</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-bell-alt"></i> icon-bell-alt</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-bolt"></i> icon-bolt</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-book"></i> icon-book</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-bookmark"></i> icon-bookmark</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-bookmark-empty"></i> icon-bookmark-empty</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-briefcase"></i> icon-briefcase</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-bullhorn"></i> icon-bullhorn</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-calendar"></i> icon-calendar</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-camera"></i> icon-camera</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-camera-retro"></i> icon-camera-retro</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-certificate"></i> icon-certificate</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-check"></i> icon-check</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-check-empty"></i> icon-check-empty</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-circle"></i> icon-circle</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-circle-blank"></i> icon-circle-blank</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-cloud"></i> icon-cloud</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-cloud-download"></i> icon-cloud-download</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-cloud-upload"></i> icon-cloud-upload</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-coffee"></i> icon-coffee</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-cog"></i> icon-cog</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-cogs"></i> icon-cogs</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-comment"></i> icon-comment</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-comment-alt"></i> icon-comment-alt</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-comments"></i> icon-comments</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-comments-alt"></i> icon-comments-alt</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-credit-card"></i> icon-credit-card</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-dashboard"></i> icon-dashboard</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-desktop"></i> icon-desktop</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-download"></i> icon-download</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-download-alt"></i> icon-download-alt</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-edit"></i> icon-edit</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-envelope"></i> icon-envelope</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-envelope-alt"></i> icon-envelope-alt</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-exchange"></i> icon-exchange</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-exclamation-sign"></i> icon-exclamation-sign</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-external-link"></i> icon-external-link</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-eye-close"></i> icon-eye-close</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-eye-open"></i> icon-eye-open</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-facetime-video"></i> icon-facetime-video</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-fighter-jet"></i> icon-figher-jet</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-film"></i> icon-film</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-filter"></i> icon-filter</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-fire"></i> icon-fire</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-flag"></i> icon-flag</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-folder-close"></i> icon-folder-close</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-folder-open"></i> icon-folder-open</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-folder-close-alt"></i> icon-folder-close-alt</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-folder-open-alt"></i> icon-folder-open-alt</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-food"></i> icon-food</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-gift"></i> icon-gift</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-glass"></i> icon-glass</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-globe"></i> icon-globe</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-group"></i> icon-group</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-hdd"></i> icon-hdd</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-headphones"></i> icon-headphones</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-heart"></i> icon-heart</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-heart-empty"></i> icon-heart-empty</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-home"></i> icon-home</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-inbox"></i> icon-inbox</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-info-sign"></i> icon-info-sign</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-key"></i> icon-key</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-leaf"></i> icon-leaf</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-laptop"></i> icon-laptop</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-legal"></i> icon-legal</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-lemon"></i> icon-lemon</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-lightbulb"></i> icon-lightbulb</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-lock"></i> icon-lock</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-unlock"></i> icon-unlock</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-magic"></i> icon-magic</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-magnet"></i> icon-magnet</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-map-marker"></i> icon-map-marker</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-minus"></i> icon-minus</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-minus-sign"></i> icon-minus-sign</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-mobile-phone"></i> icon-mobile-phone</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-money"></i> icon-money</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-move"></i> icon-move</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-music"></i> icon-music</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-off"></i> icon-off</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-ok"></i> icon-ok</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-ok-circle"></i> icon-ok-circle</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-ok-sign"></i> icon-ok-sign</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-pencil"></i> icon-pencil</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-picture"></i> icon-picture</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-plane"></i> icon-plane</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-plus"></i> icon-plus</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-plus-sign"></i> icon-plus-sign</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-print"></i> icon-print</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-pushpin"></i> icon-pushpin</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-qrcode"></i> icon-qrcode</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-question-sign"></i> icon-question-sign</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-quote-left"></i> icon-quote-left</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-quote-right"></i> icon-quote-right</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-random"></i> icon-random</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-refresh"></i> icon-refresh</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-remove"></i> icon-remove</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-remove-circle"></i> icon-remove-circle</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-remove-sign"></i> icon-remove-sign</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-reorder"></i> icon-reorder</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-reply"></i> icon-reply</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-resize-horizontal"></i> icon-resize-horizontal</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-resize-vertical"></i> icon-resize-vertical</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-retweet"></i> icon-retweet</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-road"></i> icon-road</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-rss"></i> icon-rss</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-screenshot"></i> icon-screenshot</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-search"></i> icon-search</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-share"></i> icon-share</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-share-alt"></i> icon-share-alt</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-shopping-cart"></i> icon-shopping-cart</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-signal"></i> icon-signal</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-signin"></i> icon-signin</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-signout"></i> icon-signout</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-sitemap"></i> icon-sitemap</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-sort"></i> icon-sort</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-sort-down"></i> icon-sort-down</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-sort-up"></i> icon-sort-up</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-spinner"></i> icon-spinner</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-star"></i> icon-star</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-star-empty"></i> icon-star-empty</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-star-half"></i> icon-star-half</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-tablet"></i> icon-tablet</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-tag"></i> icon-tag</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-tags"></i> icon-tags</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-tasks"></i> icon-tasks</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-thumbs-down"></i> icon-thumbs-down</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-thumbs-up"></i> icon-thumbs-up</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-time"></i> icon-time</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-tint"></i> icon-tint</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-trash"></i> icon-trash</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-trophy"></i> icon-trophy</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-truck"></i> icon-truck</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-umbrella"></i> icon-umbrella</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-upload"></i> icon-upload</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-upload-alt"></i> icon-upload-alt</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-user"></i> icon-user</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-user-md"></i> icon-user-md</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-volume-off"></i> icon-volume-off</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-volume-down"></i> icon-volume-down</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-volume-up"></i> icon-volume-up</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-warning-sign"></i> icon-warning-sign</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-wrench"></i> icon-wrench</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-zoom-in"></i> icon-zoom-in</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-zoom-out"></i> icon-zoom-out</a>

              <h4>Text Editor Icons</h4>              
              <a class="btn btn-warning" href="javascript:void(0)"><i class="icon-file"></i> icon-file</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-file-alt"></i> icon-file-alt</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-cut"></i> icon-cut</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-copy"></i> icon-copy</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-paste"></i> icon-paste</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-save"></i> icon-save</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-undo"></i> icon-undo</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-repeat"></i> icon-repeat</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-text-height"></i> icon-text-height</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-text-width"></i> icon-text-width</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-align-left"></i> icon-align-left</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-align-center"></i> icon-align-center</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-align-right"></i> icon-align-right</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-align-justify"></i> icon-align-justify</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-indent-left"></i> icon-indent-left</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-indent-right"></i> icon-indent-right</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-font"></i> icon-font</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-bold"></i> icon-bold</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-italic"></i> icon-italic</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-strikethrough"></i> icon-strikethrough</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-underline"></i> icon-underline</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-link"></i> icon-link</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-paper-clip"></i> icon-paper-clip</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-columns"></i> icon-columns</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-table"></i> icon-table</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-th-large"></i> icon-th-large</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-th"></i> icon-th</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-th-list"></i> icon-th-list</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-list"></i> icon-list</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-list-ol"></i> icon-list-ol</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-list-ul"></i> icon-list-ul</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-list-alt"></i> icon-list-alt</a>

              <h4>Directional Icons</h4>
              <a class="btn btn-danger" href="javascript:void(0)"><i class="icon-angle-left"></i> icon-angle-left</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-angle-right"></i> icon-angle-right</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-angle-up"></i> icon-angle-up</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-angle-down"></i> icon-angle-down</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-arrow-down"></i> icon-arrow-down</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-arrow-left"></i> icon-arrow-left</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-arrow-right"></i> icon-arrow-right</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-arrow-up"></i> icon-arrow-up</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-caret-down"></i> icon-caret-down</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-caret-left"></i> icon-caret-left</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-caret-right"></i> icon-caret-right</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-caret-up"></i> icon-caret-up</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-chevron-down"></i> icon-chevron-down</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-chevron-left"></i> icon-chevron-left</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-chevron-right"></i> icon-chevron-right</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-chevron-up"></i> icon-chevron-up</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-double-angle-left"></i> icon-double-angle-left</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-double-angle-right"></i> icon-double-angle-right</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-double-angle-up"></i> icon-double-angle-up</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-double-angle-down"></i> icon-double-angle-down</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-hand-down"></i> icon-hand-down</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-hand-left"></i> icon-hand-left</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-hand-right"></i> icon-hand-right</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-hand-up"></i> icon-hand-up</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-circle"></i> icon-circle</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-circle-blank"></i> icon-circle-blank</a>              

              <h4>Video Player Icons</h4>
              <a class="btn btn-success" href="javascript:void(0)"><i class="icon-play-circle"></i> icon-play-circle</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-play"></i> icon-play</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-pause"></i> icon-pause</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-stop"></i> icon-stop</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-step-backward"></i> icon-step-backward</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-fast-backward"></i> icon-fast-backward</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-backward"></i> icon-backward</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-forward"></i> icon-forward</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-fast-forward"></i> icon-fast-forward</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-step-forward"></i> icon-step-forward</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-eject"></i> icon-eject</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-fullscreen"></i> icon-fullscreen</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-resize-full"></i> icon-resize-full</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-resize-small"></i> icon-resize-small</a>

              <h4>Social Icons</h4>
              <a class="btn btn-inverse" href="javascript:void(0)"><i class="icon-phone"></i> icon-phone</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-phone-sign"></i> icon-phone-sign</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-facebook"></i> icon-facebook</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-facebook-sign"></i> icon-facebook-sign</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-twitter"></i> icon-twitter</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-twitter-sign"></i> icon-twitter-sign</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-github"></i> icon-github</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-github-alt"></i> icon-github-alt</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-github-sign"></i> icon-github-sign</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-linkedin"></i> icon-linkedin</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-linkedin-sign"></i> icon-linkedin-sign</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-pinterest"></i> icon-pinterest</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-pinterest-sign"></i> icon-pinterest-sign</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-google-plus"></i> icon-google-plus</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-google-plus-sign"></i> icon-google-plus-sign</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-sign-blank"></i> icon-sign-blank</a>              

              <h4>Medical Icons</h4>
              <a class="btn btn-info" href="javascript:void(0)"><i class="icon-ambulance"></i> icon-ambulance</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-beaker"></i> icon-beaker</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-h-sign"></i> icon-h-sign</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-hospital"></i> icon-hospital</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-medkit"></i> icon-medkit</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-plus-sign-alt"></i> icon-plus-sign-alt</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-stethoscope"></i> icon-stethoscope</a>
              <a class="btn" href="javascript:void(0)"><i class="icon-user-md"></i> icon-user-md</a>                        
          </div>
          <!-- /widget-content --> 
        </div>
      </div>

      <div class="row-fluid">
        <div class="widget">
          <div class="widget-header">
            <i class="icon-th-list"></i>
            <h3>Buttons with Images</h3>
            <a data-widget-action="thumb"></a>
            <a data-widget-action="full"></a>
            <a data-widget-action="code"></a>
            <a data-widget-action="hide"></a>
            <a data-widget-action="close"></a>
          </div>
          <!-- /widget-header -->

          <div class="widget-content">
            <div>
              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="ok">Submit</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="cancel">Cancel</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="add">Add</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="delete">Delete</span>
              </button>
              
              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="download">Download</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="download2">Download</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="upload">Upload</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="search">Search</span>
              </button>
              
              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="find">Find</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="first">First</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="prev">Previous</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="next after">Next</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="last after">Last</span>
              </button>
              
              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="play">Play</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="pause sexysimple sexyblack">Pause</span>
              </button>
          
              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="rewind">Rewind</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="forward after">Forward</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="stop">Stop</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="reload sexysimple sexyblack">Reload</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="sync">Syncronize</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="save">Save</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="email">Contact Us</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="print">Print</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="heart">Add to Favorites</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="like">Like</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="dislike">Dislike</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="accept">Accept</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="decline">Decline</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="home">Home</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="help">Help</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="info">What's this?</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="cut">Cut</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="copy">Copy</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="paste">Paste</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="erase">Erase</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="undo">Undo</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="redo">Redo</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="edit">Edit</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="calendar">Calendar</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="user">Profile</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="settings">Settings</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="wrench">Properties</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="cart">Shopping Cart</span>
              </button>

              <button class="sexybutton sexysimple sexyblack" type="reset">
                <span class="wand">Magic Wand</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="back-top">
  <a href="javascript:void(0)"><i class="icon-angle-up"></i></a>
</div>

<div class="copyright">
  <p>Copyright &copy; Your Company 2013. All rights reserved.</p>
</div>

<ol id="tour">
  <li data-class="filter-box" data-text="Next Please">
    <h5>Welcome to gappro!</h5>
    <p>Follow me please, type 'widget' to filter menu.</p>
  </li>

  <li data-class="filter-box" data-text="Next Please">
    <h5>Did you see?</h5>
    <p>Focus input box, then press 'ESC' key please.</p>
  </li> 

  <li data-class="menu-controller" data-text="Next Please">
    <h5>Hide menu items.</h5>
    <p>Click now, you can working with workspace.</p>
  </li> 

  <li data-class="menu-controller" data-text="Next Please">
    <h5>Redo it.</h5>
    <p>Click again to show menu.</p>
  </li> 

  <li data-id="widget-menu" data-text="Next Please">
    <h5>Move mouse to widget icon.</h5>
    <p>Drag widget-icon to top bar, then drop it.</p>
  </li>

  <li data-id="messages-box" data-text="Finish Tour" data-options="tipLocation:right">
    <h5>You have created a persistent fav-link.</h5>
    <p>Jump to another page to test it, or drag again to remove it.</p>
  </li>
</ol>

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/modernizr.mq.js"></script>
<script src="js-webshim/extras/modernizr-custom.js"></script>
<script src="js-webshim/polyfiller.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-ui-1.10.2.min.js"></script>
<script src="js/prettify/prettify.js"></script>
<script src="js/format/html-format.js"></script>
<script src="js/bootstrap_switch/bootstrapSwitch.js"></script>
<script src="js/bootstrap_growl/jquery.bootstrap-growl.min.js"></script>
<script src="js/joyride/jquery.joyride-2.0.3.js"></script>
<script src="js/jstorage/json2.js"></script>
<script src="js/jstorage/jstorage.min.js"></script>
<script src="js/gappro/config.js"></script>
<script src="js/gappro/gappro.js"></script>
<script src="js/application.js"></script>
<script type="text/javascript">
  $('#customSwitch').on('switch-change', function (e, data) {
      var $el = $(data.el);
      console.log(e, $el, data.value);
      alert('You select: ' + data.value);
  });
</script>
<script src="js/fix/ios-orientationchange-fix.js"></script>
</body>
</html>